<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.main {
				width: 1280px;
				min-width: 600px;
				margin: 0 auto;
			}
			
			.header {
				width: 100%;
				height: 56px;
				background-color: #ffffff;
			}
			
			#logo {
				float: left;
				margin-left: 59px;
			}
			
			.nav {
				float: right;
				line-height: 56px;
				margin-right: -10px;
			}
			
			.nav ul li {
				display: inline-block;
				width: 65px;
				height: 57px;
				margin-right: 30px;
				text-align: center;
			}
			
			.nav ul li a {
				display: inline-block;
				text-decoration: none;
				font: 14px "微软雅黑";
				color: #787b83;
				width: 100%;
				height: 34px;
				transition: all 0.1s;
			}
			
			.nav ul li a:hover {
				border-bottom: 4px solid #e74f4d;
			}
			
			.login {
				color: #e74f4d;
			}
			
			.login img {
				display: inline-block;
				margin-left: -5px;
				margin-right: 10px;
			}
			
			.banner {
				width: 1280px;
				height: 692px;
				position: relative;
			}
			
			.zhezhaoOne {
				width: 1280px;
				height: 692px;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, .3);
				z-index: 1;
			}
			
			.caption {
				position: absolute;
				top: 233px;
				left: 117px;
				color: #ffffff;
				font: 60px "微软雅黑";
				z-index: 999;
			}
			
			.newLeft {
				position: absolute;
				top: 308px;
				left: 125px;
				color: #fffdfd;
				font: 21px "微软雅黑";
				z-index: 999;
			}
			
			#start {
				position: absolute;
				top: 429px;
				left: 126px;
				width: 330px;
				height: 63px;
				border: none;
				background-color: #e74f4d;
				color: #ffffff;
				font: 30px "微软雅黑";
				z-index: 999;
				transition: all 0.5s;
			}
			#start:hover{
				background-color: #ffffff;
				color: #e74f4d;
			}
			.description {
				width: 1280px;
				height: 250px;
				background: #ffffff;
				overflow: auto;
			}
			
			.one,
			.two,
			.three,
			.four {
				float: left;
				width: 320px;
				height: 250px;
				text-align: center;
			}
			
			.one img,
			.one p,
			.two img,
			.two p,
			.three img,
			.three p,
			.four img,
			.four p {
				margin-top: 45px;
			}
			
			.one p,
			.two p,
			.three p,
			.four p {
				width: 100%;
			}
			
			.one p,
			.two p,
			.three p {
				border-right: 1px solid #bbbbbb;
			}
			
			.what {
				width: 1280px;
				height: 360px;
				background-color: #ededec;
				text-align: center;
			}
			
			.what img {
				margin-top: 89px;
			}
			
			.what h2 {
				font: 48px "微软雅黑";
				color: #a1a1a1;
				margin-top: 51px;
			}
			
			.seachCity {
				width: 1280px;
				height: 340px;
				background: url(img/7ditu.jpg);
				text-align: center;
				position: relative;
			}
			
			.zhezhaoTwo {
				width: 1280px;
				height: 340px;
				background: rgba(233, 20, 20, .2);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			
			.seachCity h2 {
				font: 20px "微软雅黑";
				color: #ffffff;
				display: inline-block;
				margin-top: 53px;
				position: relative;
				z-index: 999;
			}
			
			.xianSeach {
				width: 30px;
				height: 0px;
				border: 1px solid #ffffff;
				margin: 11px auto 19px auto;
				position: relative;
				z-index: 999;
			}
			
			.seachCity h3 {
				font: 12px "微软雅黑";
				color: #ffffff;
				position: relative;
				z-index: 999;
			}
			
			.text {
				width: 100%px;
				position: relative;
				z-index: 999;
				margin-top: 52px;
				text-align: center;
			}
			
			#guojia,
			#shengfen,
			#chengshi,
			#sousuo {
				display: inline-block;
				width: 234px;
				height: 35px;
				margin-right: 30px;
				border: none;
			}
			
			#sousuo {
				background-color: #be4e48;
				font: 14px "微软雅黑";
				color: #ffffff;
				line-height: 35px;
			}
			
			#guojia {
				margin-left: 20px;
			}
			
			.photo {
				width: 1280px;
				height: 604px;
				background: #f7f7f7;
			}
			
			.photoOne {
				margin-left: 148px;
			}
			
			.photoOne,
			.photoTwo,
			.photoThree,
			.photoFour {
				float: left;
				width: 219px;
				text-align: center;
				margin-top: 100px;
			}
			
			.photoOne,
			.photoTwo,
			.photoThree {
				margin-right: 36px;
			}
			
			.photoOne img,
			.photoTwo img,
			.photoThree img,
			.photoFour img {
				border-top: 12px solid #ffffff;
				border-bottom: 12px solid #ffffff;
				border-left: 7px solid #ffffff;
				border-right: 7px solid #ffffff;
				box-shadow: 0 0 0 3px #e0e0e0;
				transition: all 0.5s;
			}
			
			.photoTwo img {
				margin-top: 20px;
			}
			
			.photo img:hover {
				transform: scale(1.1);
			}
			
			.photoOne h2,
			.photoThree h2,
			.photoFour h2 {
				font: 14px "微软雅黑";
				color: #000000;
				margin-top: 14px;
			}
			
			.photoTwo h2 {
				font: 14px "微软雅黑";
				color: #000000;
				margin-top: -5px;
			}
			
			.photoTwo h3 {
				font: 12px "微软雅黑";
				color: #818181;
				margin-top: 8px;
			}
			
			.photoOne h3,
			.photoThree h3,
			.photoFour h3 {
				font: 12px "微软雅黑";
				color: #818181;
				margin-top: 12px;
			}
			
			.sidebanner {
				float: left;
				width: 851px;
				height: 567px;
			}
			
			.side {
				float: left;
				width: 429px;
				height: 567px;
				background-color: #fffff;
				text-align: center;
			}
			
			.side h2 {
				margin-top: 165px;
				font: 20px "微软雅黑";
				color: #000000;
			}
			
			.side h2 span {
				color: #e74f4d;
			}
			
			.side p {
				width: 287px;
				margin: 32px auto 32px auto;
				font: 12px/250% "微软雅黑";
				color: #b0b0b0;
				text-align: left;
			}
			
			.side input {
				width: 106px;
				height: 33px;
				background-color: #ffffff;
				border: 1px solid #e5676a;
				text-align: center;
				font: 12px "微软雅黑";
				color: #e5676a;
				transition: all 0.5s;
			}
			.side input:hover{
				background-color: #e5676a;
				border: 1px solid #ffffff;
				color: #ffffff;
			}
			.label {
				height: 12px;
				margin: 25px auto 0 auto;
			}
			
			.label span {
				display: inline-block;
				height: 12px;
				width: 12px;
				border: 1px solid #929292;
				border-radius: 50%;
				margin-right: 14px;
			}
			
			.label .on {
				margin-left: 15px;
			}
			
			.label span:hover {
				background-color: #929292;
			}
			
			.lunbo {
				width: 1280px;
				height: 567px;
			}
			.we{
				height: 519px;
				width: 1280px;
			}
			
			.left {
				float: left;
				width: 424px;
				height: 519px;
				text-align: center;
				background: #e74f4d;
			}
			.left h2{
				margin-top: 172px;
				font: 20px "微软雅黑";
				color: #ffffff;
			}
			.left .xianLeft{
				width: 29px;
				height: 0;
				margin: 25px auto 25px auto;
				border: 1px solid #ffffff;
			}
			.left input{
				width: 169px;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font: 20px "微软雅黑";
				color: #ffffff;
				border: 1px solid #ffffff;
				background: transparent;
				transition: all 0.5s;
			}
			.left input:hover{
				color: #e74f4d;
				background-color: #ffffff;
				border: 1px solid #e74f4d;
			}
			.center {
				float: left;
				width: 427px;
				height: 519px;
				text-align: center;
				background-color: #fffff;
			}
			.center h2{
				margin-top: 172px;
				font: 20px "微软雅黑";
				color: #000000;
			}
			.center .xianCenter{
				width: 29px;
				height: 0;
				margin: 25px auto 25px auto;
				border: 1px solid #000000;
			}
			.center input{
				width: 169px;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font: 20px "微软雅黑";
				color: #e74f4d;
				border: 1px solid #e74f4d;
				background: transparent;
				transition: all 0.5s;
			}
			.center input:hover{
				border: 1px solid #ffffff;
				background-color: #e74f4d;
				color: #ffffff;
			}
			.right {
				float: left;
				width: 429px;
				height: 519px;
				background: url(img/7photo.jpg);
			}
			
			.zhiyuanzhe {
				clear: both;
				height: 182px;
				width: 1280px;
				text-align: center;
			}
			.zhiyuanzhe h2{
				margin-top: 119px;
				font: 20px "微软雅黑";
				color: #000000;
			}
			.xianZhiyuanzhe{
				width: 30px;
				height: 0;
				margin: 10px auto 15px auto;
				border: 1px solid #E74F4D;
			}
			.zhiyuanzhe p{
				color: #b0b0b0;
				font: 12px "微软雅黑";
			}
			.xieyi{
				float: left;
				width: 287px;
				height: 400px;
				padding-left: 137px;
			}
			.xieyi h2{
				font: 14px "微软雅黑";
				color: #000000;
			}
			.xieyi p{
				font: 12px "微软雅黑";
				color: #b0b0b0;
				margin-top: 26px;
			}
			.xieyi span{
				display: inline-block;
				margin-left: 240px;
			}
			.xieyi span:hover{
				color: #e74f4d;
			}
			.from{
				float: left;
				width: 639px;
				margin-left: 74px;
			}
			#name{
				width: 277px;
				height: 10px;
				background-color: #ededee;
				border: none;
				padding: 15px;
				margin-right: 17px;
			}
			#age{
				width: 277px;
				height: 10px;
				background-color: #ededee;
				border: none;
				padding: 15px;
			}
			#num{
				width: 277px;
				height: 10px;
				background-color: #ededee;
				border: none;
				padding: 15px;
				margin-top: 17px;
				margin-right: 17px;
			}
			#add{
				width: 277px;
				height: 10px;
				background-color: #ededee;
				border: none;
				margin-top: 17px;
				padding: 15px;
			}
			textarea{
				padding: 10px;
				border: none;
				margin-left: 2px;
				margin-top: 17px;
				background-color: #ededee;
			}
			#sub{
				margin-top: 17px;
				width: 639px;
				height: 40px;
				text-align: center;
				font: 14px "微软雅黑";
				background-color: #ededee;
				border: none;
			}
			.footer{
				padding-top: 92px;
				clear: both;
				height: 269px;
				width: 1280px;
				background-color: #32363e;
				text-align: center;
			}
			.footer h2{
				font: 20px "微软雅黑";
				color: #ffffff;
			}
			.footer p{
				margin-top: 12px;
				font: 10px/170% "微软雅黑";
				color: #ffffff;
				margin-bottom: 30px;
			}
			#footSeach{
				padding: 10px;
				width: 411px;
				height: 21px;
				background-color: #ffffff;
				border: none;
			}
			#footSub{
				width: 80px;
				height: 41px;
				background-color: #6f7178;
				border: none;
				margin-left: -10px;
			}
			.icon{
				margin-top: 37px;
			}
			.icon img{
				margin-left: 20px;
			}
			.other{
				width: 1280px;
				height: 58px;
				background-color: #2f3038;
				color: #ffffff;
				font: 12px "微软雅黑";
			}
			.other p:first-child{
				float: left;
				margin-left: 100px;
				margin-top: 30px;
			}
			.other p:last-child{
				float: right;
				margin-top: 30px;
				margin-right: 100px;
			}
			.other a:link,.other a:visited,.other a:active{
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="header">
				<div id="logo">
					<img src="img/7logo.png" />
				</div>
				<div class="nav">
					<ul>
						<li>
							<a href="#" class="on">首页</a>
						</li>
						<li>
							<a href="#">最新活动</a>
						</li>
						<li>
							<a href="#">项目介绍</a>
						</li>
						<li>
							<a href="#">爱心社区</a>
						</li>
						<li>
							<a href="#">关于我们</a>
						</li>
						<li class="login"><img src="img/7login.png" />登录</li>
					</ul>
				</div>
			</div>
			<div class="banner">
				<img src="img/7banner.jpg" />
				<div class="zhezhaoOne">

				</div>
				<h1 class="caption">Time of new life</h1>
				<p class="newLeft">新时代，年轻的人们让我们一起<br /> 体验新生活，享受新生活
				</p>
				<input type="button" name="" id="start" value="开始体验" />
			</div>
			<div class="description">
				<div class="one">
					<img src="img/7iconone.png" />
					<p>打造全新世界观，让你更
						<br /> 爱你的生活
					</p>
				</div>
				<div class="two">
					<img src="img/7icontwo.png" />
					<p>丰富多彩的公益活动，发
						<br /> 挥新世界的主人公意识
					</p>
				</div>
				<div class="three">
					<img src="img/7iconthree.png" />
					<p>时尚的新理念，超前体验
						<br /> 未知的生活
					</p>
				</div>
				<div class="four">
					<img src="img/7iconfour.png" />
					<p>完善的培养机制，培养你
						<br /> 全新的世界观
					</p>
				</div>
			</div>
			<div class="what">
				<img src="img/7shu.png" />
				<h2>关于新世界，你不知道的还有什么？</h2>
			</div>
			<div class="seachCity">
				<div class="zhezhaoTwo">

				</div>
				<h2>查找新世界城市活动信息</h2>
				<div class="xianSeach">

				</div>
				<h3>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</h3>
				<div class="text">
					<input type="text" name="" id="guojia" value="" placeholder="中国" />
					<select id="shengfen">
						<option value="">山东</option>
						<option value="">河北</option>
						<option value="">黑龙江</option>
						<option value="">江西</option>
						<option value="">山西</option>
						<option value="">湖南</option>
					</select>
					<input type="text" name="" id="chengshi" value="" placeholder="城市" />
					<input type="button" name="" id="sousuo" value="搜     索" />
				</div>
			</div>
			<div class="photo">
				<div class="photoOne">
					<img src="img/7one.jpg" alt="" />

					<h2>北京活动</h2>
					<h3>新社区大联盟</h3>
				</div>
				<div class="photoTwo">

					<h2>上海活动</h2>
					<h3>夜上海新景观探索</h3>
					<img src="img/7two.jpg" alt="" />
				</div>
				<div class="photoThree">
					<img src="img/7three.jpg" alt="" />

					<h2>深圳活动</h2>
					<h3>全新海岸线观点站</h3>
				</div>
				<div class="photoFour">
					<img src="img/7four.jpg" alt="" />

					<h2>香港活动</h2>
					<h3>奢侈消费大派送</h3>
				</div>
			</div>
			<div class="lunbo">
				<div class="sidebanner">
					<img src="img/7sidebanner.jpg" />
				</div>
				<div class="side">
					<h2>新世界／<span>01</span></h2>
					<p>新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界新世界是个新世界 新世界是个新世界新世界是个新世界</p>
					<input type="button" name="" id="gengduo" value="更多详情" />
					<div class="label">
						<span class="on"></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>
			<div class="we">

				<div class="left">
					<h2>新时代
						<br />
						关于爱生活的我们</h2>
					<div class="xianLeft">

					</div>
					<input type="button" id="" value="查看更多" />
				</div>
				<div class="center">
					<h2>新时代
						<br />
						关于爱生活的我们</h2>
					<div class="xianCenter">

					</div>
					<input type="button" id="" value="查看更多" />	
				</div>
				<div class="right">

					</div>
			</div>
			<div class="zhiyuanzhe">
				<h2>成为我们的志愿者</h2>
				<div class="xianZhiyuanzhe">

				</div>
				<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情
					<br />
					那就不要犹豫，快来加入我们，成为改变所有人生活的人 </p>
			</div>
			<div class="xieyi">
				<h2>新世界志愿者协议</h2>
				<p>加入新世界志愿者的人员必须遵守中华人民共共和国的 相关法律法规，并且本着平等资源的原则 ......</p>
				<span><a href="#">more</a></span>
				<h2>新世界志愿者协议</h2>
				<p>加入新世界志愿者的人员必须遵守中华人民共共和国的 相关法律法规，并且本着平等资源的原则 ...... 副本</p>
				<span><a href="#">more</a></span>
				<h2>更多条款</h2>
				<span><a href="#">more</a></span>
			</div>
			<div class="from">
				<input type="text" id="name" value="" placeholder="姓名"/>
				<input type="text" id="age" value="" placeholder="年龄"/>
				<input type="text" id="num" value="" placeholder="联系方式"/>
				<input type="text" id="add" value="" placeholder="联系地址"/>
				<textarea cols="85" rows="3" placeholder="请简单描述您的梦想生活"></textarea>
				<input type="button" id="sub" value="提交申请" />
			</div>
			<div class="footer">
				<h2>联系我们</h2>
				<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯
					<br />
					也可以通过以下任何方式关注我们动态</p>
				<input type="text" id="footSeach" value="" placeholder="someone@email.com"/>
				<input type="submit" id="footSub" value="提交" />
				<div class="icon">
					<img src="img/7qq.png" />
					<img src="img/weibo.png" />
					<img src="img/tuite.png" />
					<img src="img/quanqiu.png" />
				</div>
			</div>
			<div class="other">
				<p>@2016新世界</p>
				<p><a href="#logo">Back to top</a></p>
			</div>
		</div>
	</body>

</html>